<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Welcome to PhotoShare</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('a.login-window').click(function() {		
        //Getting the variable's value from a link 
		var loginBox = $(this).attr('href');

		//Fade in the Popup
		$(loginBox).fadeIn(300);
		
		//Set the center alignment padding + border see css style
		var popMargTop = ($(loginBox).height() + 24) / 2; 
		var popMargLeft = ($(loginBox).width() + 24) / 2; 
		
		$(loginBox).css({ 
			'margin-top' : -popMargTop,
			'margin-left' : -popMargLeft
		});
		
		// Add the mask to body
		$('body').append('<div id="mask"></div>');
		$('#mask').fadeIn(300);
		
		return false;
	});
	
	$('a.notMember').click(function() {
		var loginBox = $('a.login-window').attr('href');
		$(loginBox).fadeOut(300);
		
		var newMemberBox = $(this).attr('href');
		$(newMemberBox).fadeIn(300);
		
		var popMargTop = ($(newMemberBox).height() + 24) / 2; 
		var popMargLeft = ($(newMemberBox).width() + 24) / 2; 		

		$(newMemberBox).css({ 
			'margin-top' : -popMargTop,
			'margin-left' : -popMargLeft
		});
		
		// Add the mask to body
		$('body').append('<div id="mask"></div>');
		$('#mask').fadeIn(300);
		
		return false;
		
	});
	// When clicking on the button close or the mask layer the popup closed
	$('a.close, #mask').live('click', function() { 
	  $('#mask , .login-popup').fadeOut(300 , function() {
		$('#mask').remove();  
	}); 
	return false;
	});
		
	
	$("#btnSignin").click(function(e) {
		e.preventDefault();
		dataString = $("#loginForm").serialize();
		
        $.ajax({
            type: "POST",
            url: "login.action",
            data: dataString,
            dataType: "json",
            success: function(data) {
     
               if (data.result == "SUCCESS") {            	   
					window.location = data.url;            		   
               } else {
            	  return false;
               }
            }
     
		});		
	});
	
	//newMember-btnCreate

	$("#newMember-btnCreate").click(function(e) {
		e.preventDefault();
		dataString = $("#newMemberForm").serialize();
		
        $.ajax({
            type: "POST",
            url: "newMember.action",
            data: dataString,
            dataType: "json",
            success: function(data) {
     
               if (data.result == "SUCCESS") {            	   
            	   var newMemberBox = $('a.notMember').attr('href');  
            	   $(newMemberBox).fadeOut(300);
            	   var loginBox = $('a.login-window').attr('href');  
            	   $(loginBox).fadeIn(300);  
	           		//Set the center alignment padding + border see css style
	           		var popMargTop = ($(loginBox).height() + 24) / 2; 
	           		var popMargLeft = ($(loginBox).width() + 24) / 2; 
	           		
	           		$(loginBox).css({ 
	           			'margin-top' : -popMargTop,
	           			'margin-left' : -popMargLeft
	           		});
	           		
	           		// Add the mask to body
	           		$('body').append('<div id="mask"></div>');
	           		$('#mask').fadeIn(300);            	   
               } else {
            	  return false;
               }
            }
     
		});		
	});
});
</script>
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" type="text/css" media="all" />

<style type="text/css">
body
{
   background-color: transparent;
   color: #000000;
   background: #1c1d1f;
}
</style>
<style type="text/css">
a
{
   color: #C8D7EB;
   outline: none;
   text-decoration: none;
}
a:visited
{
   color: #C8D7EB;
}
a:active
{
   color: #C8D7EB;
}
a:hover
{
   color: #376BAD;
   text-decoration: none;
}
</style>
<style type="text/css">
#Image1
{
   border: 0px #000000 solid;
}
#wb_Text1 
{
   background-color: transparent;
   border: 0px #000000 solid;
   padding: 0;
}
#wb_Text1 div
{
   text-align: left;
}


/* Mask for background, by default is not display */
#mask {
	display: none;
	background: #000; 
	position: fixed; left: 0; top: 0; 
	z-index: 10;
	width: 100%; height: 100%;
	opacity: 0.8;
	z-index: 999;
}

/* You can customize to your needs  */
.login-popup{
	display:none;
	background: #333;
	padding: 10px; 	
	border: 2px solid #ddd;
	float: left;
	font-size: 1.2em;
	position: fixed;
	top: 50%; left: 50%;
	z-index: 99999;
	box-shadow: 0px 0px 20px #999; /* CSS3 */
        -moz-box-shadow: 0px 0px 20px #999; /* Firefox */
        -webkit-box-shadow: 0px 0px 20px #999; /* Safari, Chrome */
	border-radius:3px 3px 3px 3px;
        -moz-border-radius: 3px; /* Firefox */
        -webkit-border-radius: 3px; /* Safari, Chrome */
}

img.btn_close { 
	float: right; 
	margin: -28px -28px 0 0;
}

fieldset { 
	border:none; 
}

form.signin .textbox label { 
	display:block; 
	padding-bottom:7px; 
}

form.signin .textbox span { 
	display:block;
}

form.signin p, form.signin span { 
	color:#999; 
	font-size:11px; 
	line-height:18px;
} 

form.signin .textbox input { 
	background:#666666; 
	border-bottom:1px solid #333;
	border-left:1px solid #000;
	border-right:1px solid #333;
	border-top:1px solid #000;
	color:#fff; 
        border-radius: 3px 3px 3px 3px;
	-moz-border-radius: 3px;
        -webkit-border-radius: 3px;
	font:13px Arial, Helvetica, sans-serif;
	padding:6px 6px 4px;
	width:200px;
}

form.signin input:-moz-placeholder { color:#bbb; text-shadow:0 0 2px #000; }
form.signin input::-webkit-input-placeholder { color:#bbb; text-shadow:0 0 2px #000;  }

.button { 
	background: -moz-linear-gradient(center top, #f3f3f3, #dddddd);
	background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#dddddd));
	background:  -o-linear-gradient(top, #f3f3f3, #dddddd);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f3f3f3', EndColorStr='#dddddd');
	border-color:#000; 
	border-width:1px;
        border-radius:4px 4px 4px 4px;
	-moz-border-radius: 4px;
        -webkit-border-radius: 4px;
	color:#333;
	cursor:pointer;
	display:inline-block;
	padding:6px 6px 4px;
	margin-top:10px;
	font:12px; 
	width:214px;
}
.button:hover { background:#ddd; }

</style>
</head>
<body>

<div id="wb_Image1" style="position:absolute;left:11px;top:200px;width:960px;height:430px;z-index:1;padding:0;">
<img src="images/homepage_hero_product.jpg" id="Image1" alt="" border="0" style="width:960px;height:430px;"></div>
<div id="wb_Text1" style="position:absolute;left:131px;top:311px;width:342px;height:31px;z-index:2;">
<span style="color:#FFFFFF;font-family:'Arial, Helvetica, sans-serif';font-size:27px;"><strong>Welcome to PhotoShare</strong></span></div>

<a href="#login-box" class="login-window" style="font-family:'Arial, Helvetica, sans-serif';position:absolute;left:209px;top:386px;width:134px;height:25px;z-index:3;">Click to Login</a>
<div id="login-box" class="login-popup">
        <a href="#" class="close"><img src="images/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>
          <form id="loginForm" method="post" class="signin" action="#">
                <fieldset class="textbox">
            	<label class="username">
                <span>User Name</span>
                <input id="username" name="username" value="" type="text" placeholder="Username">
                </label>
                <label class="password">
                <span>Password</span>
                <input id="password" name="password" value="" type="password" placeholder="Password">
                </label>
                <button id="btnSignin" class="submit button" type="button">Sign in</button>
                <p>
                <a class="notMember" href="#new-member">Not a member?</a>
                </p>        
                </fieldset>
          </form>
</div>

<div id="new-member" class="login-popup">
        <a href="#" class="close"><img src="images/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>
          <form id="newMemberForm" method="post" class="signin" action="#">
                <fieldset class="textbox">
            	<label class="username">
                <span>First Name</span>
                <input id="newMember-firstname" name="newMember-firstname" value="" type="text" placeholder="First Name">
                </label>
            	<label class="username">
                <span>Last Name</span>
                <input id="newMember-lastname" name="newMember-lastname" value="" type="text" placeholder="Last Name">
                </label>                
            	<label class="username">
                <span>User ID</span>
                <input id="newMember-userid" name="newMember-userid" value="" type="text" placeholder="User ID">
                </label>  
            	<label class="username">
                <span>E-Mail</span>
                <input id="newMember-email" name="newMember-email" value="" type="text" placeholder="E-Mail">
                </label>  
                <label class="password">
                <span>Password</span>
                <input id="newMember-password" name="newMember-password" value="" type="password" placeholder="Password">
                </label>
                <button id="newMember-btnCreate" class="submit button" type="button">Create</button>       
                </fieldset>
          </form>
</div>

</body>
</html>